<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>砸金蛋</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
		<meta name='apple-mobile-web-app-capable' content='yes'>
		<meta name='apple-mobile-web-app-status-bar-style' content='black'>
		<meta name='format-detection' content='telephone=no'>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/Mystyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/vivify.min.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div id="app">
			<!--头部-->
			<div class="hearder">
				<img class="banner1" src="img/banner1.png"/>
				<img class="banner2" src="img/banner2.png"/>
			</div>
			<!--活动内容-->
			<div class="activity_wrap">
				<!--金蛋-->
				<div class="egg_wrap">
					<ul class="egg_listy">
						<li v-for="item in egg_list.slice(0,list)">{{item}}</li>
					</ul>
					<ul class="egg_list" >
						<li class="egg" v-for="(item,index) in Number(egg_num)" @click="eggClick(index,$event)">
						</li>
					</ul>
				</div>
				<!--排行榜与活动规则-->
				<div class="ranking_list ">
					<div class="ranking_wrap">
						<div class="ranking_title">
							排行榜
						</div>
						<div class="ranking">
							<ul>
								<li>
									<p>排名</p>
									<p style="width: 30%;">公司名</p>
									<p>奖金</p>
								</li>
								<li v-if="ranking_list.length == 0">
									一个人都没有参加请添加
								</li>
								<li v-for="(item,index) in ranking_list" @click="rankingChoose(index)"	>
									<p>{{index+1}}</p>
									<input type="text" id="company_name" value="" placeholder="请输入公司名" v-model="item.company" >
									<span>￥</span>
									<input type="text" id="money" value="" placeholder="请输入金额" v-model="item.money" >
								</li>
							</ul>
						</div>
					</div>
					<div class="rule_wrap">
						<div class="rule_title">
							活动规则
						</div>
						<textarea type="text" class="rule" value="" placeholder="请输入活动规则" v-model="activity_rules ">
						</textarea>
					</div>
				</div>
				<!--红包内容-->
				<div class="bonus_wrap" v-if="bonus_show" @click.self="bonus_show=false">
					<div class="bonus vivify popIn">
						<p>恭喜获得</p>
						<p>￥{{bonus_num}}</p>
					</div>
				</div>
				<!--设置内容-->
				<div class="set_wrap" v-if="set_show">
					<div class="set_num" v-show="num_show">
						<p>请设置金蛋数</p>
						<input type="number" name="" id="set" value="" v-model="egg_num" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
						<div class="set" @click="function(){
							num_show=false;money_show=true;
						}">
							确认
						</div>
					</div>
					<div class="set_money" v-show="money_show">
						<p>请设置金额</p>		
						<p>剩余{{remain}}颗蛋没设置金额</p>
						<p>温馨提示:没设置的金蛋里面金额为0</p>
						<ul>
							<li>
								<p>数量</p>
								<p>金额</p>
							</li>
							<li v-for="(item,index) in egg_moneyList">
								<input type="number" name="" id="set" value="" v-model="egg_moneyList[index].num" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
								<input type="number" name="" id="set" value="" v-model="egg_moneyList[index].money" />
							</li>
						</ul>
						<div class="" style="display: flex;justify-content: space-between;">
							<div class="set" @click="start">
								确认
							</div>
							<div class="set" @click="addegg_moneyList">
								添加
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
				<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
				<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
